<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">



	<rich:extendedDataTable id="tbl_lista_usuarios" var="obju"
		value="#{usuariosBean.listUsrs}">
		<f:facet name="noData">No existen usuarios para listar</f:facet>

		<rich:column>
			<f:facet name="header">
				<h:outputLabel value="Cédula" />
			</f:facet>
			<h:outputText value="#{obju.cedula}" />
		</rich:column>

		<rich:column>
			<f:facet name="header">
				<h:outputLabel value="Nombre" />
			</f:facet>
			<h:outputText value="#{obju.nombre}" />
		</rich:column>

		<rich:column>
			<f:facet name="header">
				<h:outputLabel value="Apellido" />
			</f:facet>
			<h:outputText value="#{obju.apellido}" />
		</rich:column>

		<rich:column>
			<f:facet name="header">
				<h:outputLabel value="Correo" />
			</f:facet>
			<h:outputText value="#{obju.mail}" />
		</rich:column>

		<rich:column>
			<f:facet name="header">
				<h:outputLabel value="Teléfono" />
			</f:facet>
			<h:outputText value="#{obju.telefono}" />
		</rich:column>


		<rich:column>
			<f:facet name="header">
				<h:outputLabel value="Opciones" />
			</f:facet>

			<a4j:commandButton execute="@this" render="popupEliminar"
				value="Eliminar"
				oncomplete="#{rich:component('popupEliminar')}.show()">
				<f:setPropertyActionListener target="#{usuariosBean.usr}"
					value="#{obju}" />
			</a4j:commandButton>

			<a4j:commandButton execute="@this" render="popupEditar"
				value="Editar" oncomplete="#{rich:component('popupEditar')}.show()">
				<f:setPropertyActionListener target="#{usuariosBean.usr}"
					value="#{obju}" />
			</a4j:commandButton>

		</rich:column>
	</rich:extendedDataTable>


	<rich:popupPanel id="popupEliminar" modal="true" resizeable="true"
		domElementAttachment="parent" >
		<f:facet name="header">
			<h:outputText value="Eliminar" />
		</f:facet>
		<f:facet name="controls">
			<h:outputLink value="#"
				onclick="#{rich:component('popupEliminar')}.hide(); return false;">
                X
            </h:outputLink>
		</f:facet>
		<p>Esta seguro que desea eliminar este usuario....</p>
		<a4j:commandButton value="Eliminar"
			action="#{usuariosBean.eliminarUsuario()}"
			render="tbl_lista_usuarios" execute="@this"
			oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('popupEliminar')}.hide();}" />
		<a4j:commandButton value="No"
			onclick="#{rich:component('popupEliminar')}.hide(); return false;" />
	</rich:popupPanel>







	<rich:popupPanel id="popupEditar" modal="true"  autosized="true" 
		domElementAttachment="parent" style="width:90%;max-width:90%" >
		<f:facet name="header">
			<h:outputText value="Eliminar" />
		</f:facet>
		<f:facet name="controls">
			<h:outputLink value="#"
				onclick="#{rich:component('popupEditar')}.hide(); return false;">
                X
            </h:outputLink>
		</f:facet>
		<fieldset style="width: 100%;max-width: 100%;">

			<h:outputLabel value="Cédula: " />
			<h:inputText id="itCedulaEdit" value="#{usuariosBean.usr.cedula}">
				<f:validator validatorId="CedulaValidator" />
			</h:inputText>
			<rich:message for="itCedulaEdit" />


			<h:outputLabel value="Nombres: " />
			<h:inputText id="itNombresEdit" value="#{usuariosBean.usr.nombre}"
				required="true" />
			<rich:message for="itNombresEdit" />

			<h:outputLabel value="Apellidos: " />
			<h:inputText id="itApellidosEdit"
				value="#{usuariosBean.usr.apellido}" required="true" />
			<rich:message for="itApellidosEdit" />

			<h:outputLabel value="Teléfono: " />
			<h:inputText id="itTelefonoEdit" value="#{usuariosBean.usr.telefono}" />
			<rich:message for="itTelefonoEdit" />

			<h:outputLabel value="E-mail: " />
			<h:inputText id="itEmailEdit" value="#{usuariosBean.usr.mail}"
				required="true" validatorMessage="correo invalido">
				<f:validateRegex
					pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
			</h:inputText>
			<rich:message for="itEmailEdit" />


			<h:outputLabel value="Nick: " />
			<h:inputText id="itNickEdit" value="#{usuariosBean.usr.usuario}"
				required="true" />
			<rich:message for="itNickEdit" />



			<h:outputLabel value="Contraseña: " />
			<h:inputSecret id="itPasswordEdit"
				value="#{usuariosBean.usr.password}" required="true" />
			<rich:message for="itPasswordEdit" />


			<h:outputLabel value="Confirmar Contraseña: " />
			<h:inputSecret id="itConfirmarPassEdit"
				value="#{usuariosBean.usr.confirmarPassword}" required="true" />
			<rich:message for="itConfirmarPassEdit" />


			<rich:panel style="max-width:92%">
				<f:facet name="header">
					<h:outputText value="Roles"></h:outputText>
				</f:facet>
				<rich:pickList value="#{usuariosBean.listRoles}"
					sourceCaption="Roles" targetCaption="Roles Asignados"
					addAllText="Asignar Todos" addText="Asignar"
					removeAllText="Revocar Todos" removeText="Revocar"
					listHeight="50px">
					<f:selectItems value="#{usuariosBean.listRolesDisponibles}"
						var="rol" itemLabel="#{rol.descripcion}" itemValue="#{rol.id}" />
				</rich:pickList>
			</rich:panel>
		</fieldset>


		<a4j:commandButton value="Actualizar"
			action="#{usuariosBean.guardar()}" render="tbl_lista_usuarios"
			execute="popupEditar"
			oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('popupEditar')}.hide();}" />

		<a4j:commandButton value="Cancelar"
			onclick="#{rich:component('popupEditar')}.hide(); return false;" />


	</rich:popupPanel>






</ui:composition>
